<template>
    <view
      class="content"
      :style="{
        'padding-top': height + 'px',
      }"
    >
      <view
        :style="{
          height: statusBarHeight + 'px',
        }"
      >
      </view>
      <!-- 头部 -->
      <view
        class="head"
        :style="{
          top: statusBarHeight + 'px',
        }"
      >
        <view class="head_left">
          <u-icon
            name="arrow-left"
            color="#444444"
            size="24"
            :bold="true"
            @click="toBack"
          ></u-icon>
        </view>
        <view class="text">开始记载</view>
      </view>
      <!-- 主体 -->
      <u--form
        labelPosition="left"
        labelWidth="200rpx"
        :model="model1"
        ref="uForm"
        class="form_box"
      >
        <u-form-item
          label="记载类型"
          prop="userInfo.group"
          ref="item1"
          borderBottom
        >
          <view class="picker_fill" @click="show = true">
            {{ model1.userInfo.group }} <u-icon name="arrow-down-fill" color="rgb(192, 196, 204)" style="margin-left:16rpx"></u-icon>
          </view>
        </u-form-item>
        <u-form-item
          label="记载标题"
          prop="userInfo.title"
          ref="item2"
          borderBottom
        >
          <view class="input_view">
            <u--input
              v-model="model1.userInfo.title"
              border="none"
              :customStyle="{
                'border-radio': '16rpx',
              }"
              placeholder="填输入标题"
              inputAlign='right'
            ></u--input>
          </view>
        </u-form-item>
  
        <u-form-item
          labelPosition="top"
          label=""
          prop="content"
          ref="item2"
          borderBottom
        >
          <u--textarea
            border="none"
            style="margin-top: 16rpx"
            height="140"
            v-model="model1.userInfo.content"
            placeholder="记载家乡的风土人情、奇闻趣事..."
          ></u--textarea>
        </u-form-item>
        <view class="props">
          <view class="props_up">
            <u-upload
              :fileList="fileList1"
              @afterRead="afterRead"
              @delete="deletePic"
              name="1"
              :maxCount="3"
            >
              <view class="up">
                <image
                  style="width: 48rpx; height: 48rpx"
                  src="@/static/images/icon_cjtl_shangchuantupianhuoshipin.png"
                  mode=""
                ></image>
                <view class="up_text"> 上传图片/视频 </view>
              </view>
            </u-upload>
          </view>
          <view class="props_up">
              <view class="up">
                <image
                  style="width: 48rpx; height: 48rpx"
                  src="@/static/images/icon_cjtl_shangchuanyinpin.png"
                  mode=""
                ></image>
                <view class="up_text"> 上传音频 </view>
              </view>
          </view>
        </view>
        <u-form-item
          label="权限"
          prop="userInfo.power"
          ref="item1"
          borderBottom
        >
          <view class="picker_fill" @click="show1 = true">
            {{ model1.userInfo.power }} <u-icon name="arrow-down-fill" color="rgb(192, 196, 204)" style="margin-left:16rpx"></u-icon>
          </view>
        </u-form-item>
        <view class="fill_text">
          <view class=""> 1、视频文件过大时压缩时间较长，请耐心等待 </view>
          <view class=""> 2、若出现黑屏，请清理手机内存 </view>
          <view class="">
            3、建议您调整手机拍摄清晰度选择720p及以下的规格进行拍摄
          </view>
        </view>
  
        <view class="btn">
          <view class="box_btn"> 发布 </view>
        </view>
      </u--form>
  
      <u-picker
        :show="show"
        :columns="columns"
        @close="show = false"
        :closeOnClickOverlay="true"
        @confirm="confirm"
        @cancel="cancel"
      ></u-picker>
  
      <u-picker
        :show="show1"
        :columns="columns1"
        @close="show = false"
        :closeOnClickOverlay="true"
        @confirm="confirm1"
        @cancel="cancel1"
      ></u-picker>
	  <floatingBall></floatingBall>
    </view>
  </template>
  
  <script>
  import collect from "@/components/collect.vue"; // 收藏、
  import progressBar from "@/pages/components/progress_bar.vue"; //录音
  export default {
    components: {
      collect,
      progressBar,
    },
  
    data() {
      return {
        title: "",
        statusBarHeight: 0,
        height: 0,
        model1: {
          userInfo: {
            group: "家乡的山", // 成员划分
            title: "", // 标题
            content: "", // 简介
            identity:'', // 成员身份
            power:'公开', // 权限
          },
        },
        fileList1: [],
        show: false,
        show1:false,
        columns: [["家乡的山", "家乡的水"]],
        columns1:[["公开", "粉丝可见"]],
      };
    },
    created() {
      const statusBarHeight = uni.getSystemInfoSync(); // 获取手机状态栏高度
  
      this.statusBarHeight = statusBarHeight.statusBarHeight;
      this.$nextTick(() => {
        uni
          .createSelectorQuery()
          .select(".head")
          .boundingClientRect((data) => {
            this.height = data.height;
          })
          .exec();
      });
    },
    methods: {
      toBack() {
        uni.navigateBack({
          delta: 1,
        });
      },
      // 删除图片
      deletePic(event) {
        this[`fileList${event.name}`].splice(event.index, 1);
      },
      // 新增图片
      async afterRead(event) {
        // 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
        let lists = [].concat(event.file);
        let fileListLen = this[`fileList${event.name}`].length;
        lists.map((item) => {
          this[`fileList${event.name}`].push({
            ...item,
            status: "uploading",
            message: "上传中",
          });
        });
        for (let i = 0; i < lists.length; i++) {
          const result = await this.uploadFilePromise(lists[i].url);
          let item = this[`fileList${event.name}`][fileListLen];
          this[`fileList${event.name}`].splice(
            fileListLen,
            1,
            Object.assign(item, {
              status: "success",
              message: "",
              url: result,
            })
          );
          fileListLen++;
        }
      },
      uploadFilePromise(url) {
        return new Promise((resolve, reject) => {
          let a = uni.uploadFile({
            url: "http://192.168.2.21:7001/upload", // 仅为示例，非真实的接口地址
            filePath: url,
            name: "file",
            formData: {
              user: "test",
            },
            success: (res) => {
              setTimeout(() => {
                resolve(res.data.data);
              }, 1000);
            },
          });
        });
      },
      confirm(e) {
        console.log("eeee", e);
        this.model1.userInfo.group = e.value[0];
        this.show = false;
      },
      confirm1(e) {
        console.log("eeee", e);
        this.model1.userInfo.power = e.value[0];
        this.show1 = false;
      },
      cancel(e){
        this.show = false;
      },
      cancel1(e){
        this.show1 = false;
      }
    },
  };
  </script>
  
  <style scoped lang="scss">
  .content {
    // background: #F7F8FA;
    box-sizing: border-box;
  }
  .head {
    width: 100%;
    padding: 18rpx 30rpx 47rpx;
    position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    z-index: 99;
    background: #ffffff;
    .head_left {
      position: absolute;
      left: 30rpx;
    }
  
    .head_right {
      position: absolute;
      right: 30rpx;
      color: #55b877;
      font-size: 30rpx;
    }
  
    .text {
      font-size: 36rpx;
      font-family: PingFang SC-Bold, PingFang SC;
      font-weight: 400;
      color: #444444;
    }
  }
  .form_box {
    padding: 0 30rpx;
    box-sizing: border-box;
    .input_view{
      width: 100%;
    }
    .picker_fill {
      width: 100%;
      display: flex;
      justify-content: flex-end;
      // margin-left: 350rpx;
      color: rgb(192, 196, 204);
    }
    .u-textarea {
      padding: 0;
    }
    .btn {
      width: 100%;
      padding: 0 30rpx;
      box-sizing: border-box;
      position: fixed;
      bottom: 0;
      left: 0;
      margin-bottom: 80rpx;
      .box_btn {
        width: 100%;
        height: 96rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        background: linear-gradient(360deg, #50b674 0%, #aeddbd 100%);
        border-radius: 48rpx;
        font-size: 30rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        color: #ffffff;
      }
    }
    .introduce {
      background: #f7f8fa;
      padding: 32rpx;
      border-radius: 16rpx;
      margin-top: 56rpx;
      .introduce_title {
        font-size: 32rpx;
        color: #444444;
      }
      .introduce_text {
        font-size: 26rpx;
        color: #888888;
        margin-top: 16rpx;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-line-clamp: 3; /* 控制显示的行数 */
      }
    }
    .props {
      width: 100%;
      margin-top: 10rpx;
      border-bottom: 1rpx solid #eee;
      padding-bottom: 32rpx;
      display: flex;
      .props_text {
        font-size: 24rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        color: #adadad;
      }
  
      .props_up {
        margin-top: 24rpx;
  
        .up {
          width: 156rpx;
          display: flex;
          flex-direction: column;
          align-items: center;
        }
  
        .up_text {
          font-size: 24rpx;
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          color: #888888;
          margin-top: 12rpx;
        }
      }
    }
    .fill_text {
      width: 100%;
      margin-top: 32rpx;
      font-size: 24rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      color: #888888;
      line-height: 40rpx;
    }
  }
  </style>